<!-- 字体样式 -->
<template>
    <template v-if="['list'].includes(widgetType)">
        <layout-pane label="标题设置" wrap>
            <si-font-style
                v-model:fontSize="widget.widgetData.eles.style['font-size']"
                v-model:fontWeight="widget.widgetData.eles.style['font-weight']"
                v-model:fontStyle="widget.widgetData.eles.style['font-style']"
                v-model:textDecoration="widget.widgetData.eles.style['text-decoration']"
                v-model:color="widget.widgetData.eles.style.color"
                v-model:textAlign="widget.widgetData.eles.style['text-align']"
            />
        </layout-pane>

        <el-divider></el-divider>
        <layout-pane label="简介设置" wrap>
            <si-font-style
                v-model:fontSize="widget.widgetData.eles.customFeature.secFontSize"
                v-model:fontWeight="widget.widgetData.eles.customFeature.secFontWeight"
                v-model:fontStyle="widget.widgetData.eles.customFeature.secFontStyle"
                v-model:textDecoration="widget.widgetData.eles.customFeature.secTextDecoration"
                v-model:color="widget.widgetData.eles.customFeature.secColor"
                v-model:textAlign="widget.widgetData.eles.customFeature.secTextAlign"
            />
        </layout-pane>
    </template>
    <template v-else>
        <si-font-style
            v-model:fontSize="widget.widgetData.eles.style['font-size']"
            v-model:fontWeight="widget.widgetData.eles.style['font-weight']"
            v-model:fontStyle="widget.widgetData.eles.style['font-style']"
            v-model:textDecoration="widget.widgetData.eles.style['text-decoration']"
            v-model:color="widget.widgetData.eles.style.color"
            v-model:textAlign="widget.widgetData.eles.style['text-align']"
        />
    </template>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import { SiFontStyle } from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'RowFontStyle',
    components: {
        LayoutPane,
        SiFontStyle
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)

        return {
            widget,
            widgetType
        }
    }
})
</script>